<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>爱宠知识案例</title>
	<style type="text/css">
		
		*{
			margin: 0;
			padding: 0;
		}
		.father{

			height: 327px;
			width: 260px;
			border: 1px solid #009900;
            margin: 10px auto;
            background:url("bg.gif");

		}
		.title{
			height: 23px;
			width: 230px;
			margin-top: 10px;
			border-left: 4px solid #C9E143;
			/*由此可见那个绿色柱子其实是一道线啊，粗4px 实线solid 颜色#C9E143*/
			line-height: 23px;
			padding-left:11px;
			color: white;
			margin-left: 10px;
			/*background: url("tb.gif") no-repeat 10px center;这段代码是我自己写的主要是为了添加图片*/
			/*10px是左边的位置center是在垂直方向居中，而上面代码的margin-left:10px;把title这个小盒子向右移动了10px*/
			font-size: 18px;
			font-family: 微软雅黑;
		}
		.son{
			width: 240px;
			height: 280px;
			background: #FFFFFF ;
			margin-top: 5px;
			margin-left: 10px;
			overflow: hidden;
		}
	
		.son ul{
           /*margin-top: 12px;*/
            margin-left:10px;
		    margin-right:10px;
		    /*看来 margin-left:10px;margin-right:10px;是控制虚线长度的啊，其实真正的意思是ul的长度*/
		}
	     .son li{
			list-style: none;
			
			line-height: 30px;/*		这是这个li的高度也是行间距	*/
			font-size: 16px;
		    padding-left: 15px;
		    border-bottom:1px dashed #666666;
		    background: url("tb.gif") no-repeat left center;
		}
		
		.son a{
			text-decoration: none;
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="title">爱宠知识点</div>
		<div class="son">
		<ul>
			<li><a href="#">狗子比喵星人听话</a></li>
			<li><a href="#">狗脾气好不易发怒</a></li>
			<li><a href="#">狗子比喵星人听话</a></li>
			<li><a href="#">狗子比喵星人听话</a></li>
			<li><a href="#">狗子比喵星人听话</a></li>
			<li><a href="#">狗子比喵星人听话</a></li>
			<li><a href="#">狗子比喵星人听话</a></li>
			<li><a href="#">狗子比喵星人听话</a></li>
			<li><a href="#">狗子比喵星人听话</a></li>
		</ul>
	</div>
</div>
</body>
</html>